<template>
  <transition name="slide">
    <musiclist :songs="songs" :bg-image="bgImage" :title="title"></musiclist>
  </transition>
</template>
<script>
import { mapGetters, mapMutations } from "vuex";
import { getSingeDetail, getMusicVkey } from "@/api/Singer";
import { ERR_OK } from "@/api/config";
import { createSong } from "@/common/js/SongObject";
import musiclist from "@/components/music-list/music-list";
export default {
  data() {
    return {
      songs: [] //存放当前这个歌手的歌曲列表
    };
  },
  computed: {
    //计算属性得到title的值
    title() {
      return this.singer.name;
    },
    bgImage() {
      return this.singer.avatar;
    },
    //计算属性得到bgImage的值
    ...mapGetters(["singer"])
  },
  components: {
    musiclist
  },
  created() {
    this._initSingerDetail();
  },
  methods: {
    // 初始化歌曲列表数据
    _initSingerDetail() {
      //解决直接在当前页面刷新，没有id的问题
      if (!this.singer.id) {
        this.$router.push("/singer");
        return;
      }
      getSingeDetail(this.singer.id).then(res => {
        if (res.code == ERR_OK) {
          this.songs = this._normalizeSongs(res.data.list);
        }
      });
    },
    //整理歌曲列表的数据
    _normalizeSongs(list) {
      let ret = [];
      list.forEach(item => {
        let { musicData } = item;
        let playUrl = "";
        getMusicVkey(musicData.songmid).then(res => {
          let Data = res.req_0;
          if (Data.code === ERR_OK) {
            playUrl = Data.data.midurlinfo[0].purl;
            if (musicData.songid && musicData.albummid) {
              const newSong = createSong(musicData, playUrl)
              // this.changePlaying(false)
              ret.push(newSong);
            }
          }
        });
      });
      return ret;
    },
    ...mapMutations({
      changePlaying: "SET_PLAYING_SATATE"
    })
  }
};
</script>
<style lang="stylus" scoped  rel="stylesheet/stylus">
@import '../../common/stylus/variable.styl';

.singer_detail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: $color-background;
}

// 动画
.slide-enter-active, .slide-leave-active {
  transition: all 0.3s;
}

.slide-enter, .slide-leave-to {
  transform: translate3d(100%, 0, 0);
}
</style>
